<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>预览</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <style>
    html, body {
      margin: 0;
	  width: 100vw;
      height: 100vh;
      background: #000;
    }
    #viewer {
      width: 100vw;
      height: 90vh;
    }
	
	/* .psv-button {
		display: block !important;
	} */
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
</head>
<body>
  <div id="viewer"></div>

<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
            "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.module.js"
        }
    }
</script>

<script type="module">
    import { Viewer } from '@photo-sphere-viewer/core';

	const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
    const viewer = new Viewer({
        container: "viewer",
        panorama: baseUrl + 'sphere.jpg', // 可替换成你自己的全景图
		// navbar: [
		//         'zoom',
		//         'move',
		//         // {
		//         //     id: 'change',
		//         //     title: 'Change image',
		//         //     content: document.querySelector('#icon').innerText,
		//         //     onClick(viewer) {
		//         //         viewer.setPanorama(baseUrl + 'sphere-test.jpg', {
		//         //             caption: '',
		//         //             description: null,
		//         //         });
		//         //         viewer.navbar.getButton('change').hide();
		//         //     },
		//         // },
		//         'caption',
		//         'fullscreen',
		//     ],
    });
</script>
</body>
</html>